<template>
	<div class="shape-box">
    <slot/>  
		<div
			:class="`shape-point ${point}`"
			v-for="(point, index) in pointList"
			:key="index"
			:style="usePointStyle(point, index, item.attr)"
      @mousedown="useMousePointHandle($event, point, item.attr)"

		>
		</div>
	</div>
</template>
<script setup lang="ts">
import { useMousePointHandle } from '@/views/ContentEdit/hooks/useDrag.hook'
import { usePointStyle } from '@/views/ContentEdit/hooks/useStyle.hook'
const props = defineProps({
  item: {
    type: Object,
    default: () =>({})
  }
})
defineOptions({ name: 'EditShapeBox' })
const pointList = ['t', 'r', 'b', 'l', 'lt', 'rt', 'lb', 'rb']
</script>
<style lang="scss" scoped>
.shape-box{
	position: absolute;
	cursor: move;
	.shape-point {
    z-index: 1;
    position: absolute;
    width: 7px;
    height: 7px;
    border: 3px solid #b4a992;
    border-radius: 5px;
    background-color: #fff;
    transform: translate(-40%, -30%);
    &.t {
      width: 30px;
      transform: translate(-50%, -50%);
    }
    &.b {
      width: 30px;
      transform: translate(-50%, -30%);
    }
    &.l,
    &.r {
      height: 30px;
    }
    &.r {
      transform: translate(-20%, -50%);
    }
    &.l {
      transform: translate(-45%, -50%);
    }
    &.rt,
    &.rb {
      transform: translate(-30%, -30%);
    }
  }
}
</style>